<template>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

        <div class="car">
            <div class="title" style="text-align: center">
                <i class="el-icon-arrow-left" @click="rollback" style="float: left;padding-top: 15px"></i><span>提交订单</span>
            </div>
            <div class="box">
                <el-row style="margin-top: 0">
                    <el-col :span="24" style="background: #FFFFFF;margin-top: 10px">
                        <el-header style="height: 40px;padding-top: 10px;padding-left: 5px;font-size: 20px">
                            <!--选择收货地址 <i class="el-icon-arrow-right" style="float: right" @click=""></i>-->
                            <!--todo-->
                            <van-field
                                    v-model="addFieldValue"
                                    is-link
                                    readonly
                                    label="请选择地址"
                                    placeholder=""
                                    @click="addShow = true"/>
                            <van-popup v-model="addShow" round position="bottom">
                                <van-cascader
                                        v-model="addCascaderValue"
                                        title="请选择"
                                        :options="addOptions"
                                        @close="addShow = false"
                                        :field-names="addFieldNames"
                                        @finish="addOnFinish"/>
                            </van-popup>
                        </el-header>
                        <div><font style="font-size: 10px;padding: 5px"><span>立即送出</span><span style="float: right">大约{{this.time}}送达</span></font></div>
                    </el-col>
                </el-row>
            </div>

            <el-row style="margin-top: 1px">
                <el-col :span="24" style="background: #FFFFFF;margin-top: 5px">
                    <van-field
                            v-model="fieldValue"
                            is-link
                            readonly
                            label="支付方式"
                            placeholder=""
                            @click="show = true"/>
                    <van-popup v-model="show" round position="bottom">
                        <van-cascader
                                v-model="cascaderValue"
                                title="请选择"
                                :options="options"
                                @close="show = false"
                                :field-names="fieldNames"
                                @finish="onFinish"/>
                    </van-popup>
                </el-col>
            </el-row>

            <el-row style="margin-top: 1px">
                <el-col :span="24" style="background: #FFFFFF;margin-top: 5px">
                    <div>
                        <div class="section" v-for="item in list">
                            <div class="top" style="margin-top: 10px">
                                <span style="font-size: 10px;padding-left: 10px;">{{item.branchname}}</span>
                            </div>
                            <div v-for="obj in item.pds" >
                                <div style="margin-bottom: 10px">
                                    <img :src="obj.goodsUrl" style="width: 40px;height: 40px;margin-top: 5px;padding-left: 10px"/>
                                    <span >{{obj.goodsname}}</span> <span style="float: right;margin-top: 5px">￥{{obj.gprice}}</span>
                                    <span style="float: bottom">x{{obj.num}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <div style="margin-top: 1px">
                <div :span="24" style="background: #FFFFFF;margin-top: 10px">
                    <van-submit-bar :price="sum*100" button-text="提交订单" @submit="submit" />
                    <el-dialog
                            title="请支付"
                            :visible.sync="dialogVisible"
                            width="300px">
                        <div style="text-align: center">
                            <p>微信支付{{payResult.price}}元</p>
                            <div style="border: 1px solid #f3f3f3;width: 200px;padding: 10px;margin: 0px auto;">
                                <vue-qr
                                        :text="payResult.codeUrl"
                                        :margin="0"
                                        colorDark="green"
                                        :logoSrc="require('@/assets/logo.png')"
                                        colorLight="#fff"
                                        :size="200">
                                </vue-qr>
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <div style="font-size: 13px">
                            提示:<br>
                            支付成功前请勿手动关闭页面<br>
                            二维码15分钟有效,请及时扫码支付<br>
                        </div>
                    </el-dialog>
                </div>
            </div>
            <div style="height: 80px;text-align: center;margin-top: 10px">到底了~</div>
        </div>
    </van-pull-refresh>
</template>

<script>
    import vueQr from 'vue-qr'
    export default {
        name: "orderSettle",
        components:{
            vueQr
        },
        data() {
            return {

                stIds:[],
                poIds:[],
                //订单号
                orders:"",
                payResult:{
                    price:0,
                    codeUrl:"",
                    orders:"",
                },
                dialogVisible:false,
                timer:"",

                //地址级联选择器
                addShow: false,
                addFieldValue: '',
                addCascaderValue: '',
                addFieldNames: {
                    text: 'address',
                    value: 'addressId',
                },
                province:"",
                city:"",
                county:"",
                addressDetail:"",
                // 选项列表 支持多级嵌套
                addOptions: [],
                adds:[],
                addId:"",
                address:"",
                addressId:"",


                //支付方式级联选择器
                show: false,
                fieldValue: '',
                cascaderValue: '',
                fieldNames: {
                    text: 'paymodels',
                    value: 'paymodelid',
                },
                // 选项列表 支持多级嵌套
                options: [],
                pays: [],
                pmid:"",

                //预计送达时间
                time:"",

                paymodels:'',
                paymodelid:'',

                isLoading: false,
                list:[],
                pds:[],
                //总价
                sum:0,
            };
        },
        created() {
            this.initdata();
            this.total();
            this.paymodel();
            this.timeArrival();
            this.findAddress();
        },
        methods: {

            //支付方式
            paymodel(){
                this.$http.get("/payorder/paymodel/findAll").then(result =>{
                    this.pays = result.data.data;
                    this.pays.forEach(item => {
                        this.options.push({
                            paymodels: item.paymodels,
                            paymodelid: item.paymodelid,
                        })
                    })
                })

            },

            //查询用户地址
            findAddress(){
                var uid = sessionStorage.getItem("userid")
                this.$http.post("/payorder/payorder/findAddressUserId?uid="+uid).then(result =>{
                    this.adds = result.data.data;
                    this.adds.forEach(item => {
                        this.addOptions.push({
                            province: item.province,
                            city: item.city,
                            county: item.county,
                            addressDetail: item.addressDetail,
                            addressId: item.id,
                            address: item.province+item.city+item.county+item.addressDetail
                        })
                        console.log(this.addOptions)

                    })
                })
            },

            // 支付方式选项选择完毕后，会触发 finish 事件
            onFinish({ selectedOptions }) {
                this.show = false;
                this.fieldValue = selectedOptions.map((option) => option.paymodels).join('/');
                this.paymodelid = selectedOptions.map(option => option.paymodelid).join(',')
                this.pmid = this.paymodelid
            },

            // 地址选项选择完毕后，会触发 finish 事件
            addOnFinish({ selectedOptions }) {
                this.addShow = false;
                this.addFieldValue = selectedOptions.map((option) => option.address).join('/');
                this.addressId = selectedOptions.map(option => option.addressId).join(',')
                this.addId = this.addressId
                console.log(this.addId)
            },

            //下拉刷新
            onRefresh() {
                setTimeout(() => {
                    window.location.reload()
                    this.isLoading = false;
                }, 1000);
            },

            //预计送达时间
            timeArrival(){
                this.$http.get("/payorder/payorder/getDate").then(result=>{
                    this.time = result.data.data;
                })
            },

            //回退
            rollback(){
                this.$router.push("/index/shopCar")
                this.$http.post("/payorder/payorder/deleteIsDeleted",this.poIds).then(result=>{
                    console.log(result)
                })
            },

            //查询所有
            initdata(){
                var uid = sessionStorage.getItem("userid")
                this.$http.get("/payorder/payorder/findAll?uid="+uid).then(result=>{
                    this.list = result.data.data
                    this.pds = result.data.data.list
                    console.log(result)
                    this.list.forEach(v => {
                        v.pds.forEach(i => {
                            this.poIds.push(i.poId)
                            this.stIds.push(i.stId)
                        })
                    })

                })
            },

            //查询商品的总价
            total(){
                var uid = sessionStorage.getItem("userid")
                this.$http.get("/payorder/payorder/sumGoods?uid="+uid).then(result=>{
                    this.sum = result.data.data;
                })
            },

            //根据微信支付订单号查询支付状态
            queryPayStatus(orders){
                this.$http.post("/order/order/queryPayStutus?orders="+orders).then(result=>{
                    if(result.data.code===2000){
                        this.dialogVisible=false;
                        //消除定时器
                        clearInterval(this.timer)
                        this.timer=null;
                        this.$message.success("支付成功");

                        // 转跳我的订单页面
                        setTimeout(() =>{
                            this.$router.push("/index/myShopList");
                        },1000)
                    }
                })
            },

            //提交订单
            submit(){
                if(this.paymodelid && this.addId) {
                    var userId = sessionStorage.getItem("userid")
                    this.$http.post("/payorder/payorder/addOrder?sum=" + this.sum + "&paymodelid=" + this.paymodelid+"&address="+this.addFieldValue+"&userId="+userId, this.list).then(result => {
                        console.log(this.list)
                        console.log(result.data.data);
                        this.orders = result.data.data;
                        this.$http.post("/payorder/payorder/deleteIsDeleted",this.poIds).then(result=>{
                            console.log(result)
                        })
                        this.$http.post("/shoppingcar/shoppingTrolley/deleteIsDeleted",this.stIds).then(result=>{
                            console.log(result)
                        })
                        console.log(result);
                        console.log(userId)
                        //微信支付
                        if(this.paymodelid==1){
                            this.dialogVisible=true
                            this.$http.post("/order/order/createNavite?orders="+this.orders).then(result =>{
                                console.log(result.data.data);
                                if(result.data.code===2000) {
                                    this.payResult = result.data.data;
                                    //设置定时任务,3秒调用一次
                                    this.timer = setInterval(()=>{
                                        this.queryPayStatus(this.payResult.orders)
                                    },3000);
                                }
                            })
                        }else if(this.paymodelid==2){
                            window.open("http://192.168.1.20:8401/order/order/alipay?orders="+this.orders)
                        }
                    })
                }else {
                    this.$message({
                        message:"请选择支付方式以及地址"
                    })
                }
            },

        }
    }
</script>

<style lang='less' scoped>

    * {
        padding: 0;
        margin: 0;
    }
    .car {
        width: 100vw;
        overflow: hidden;
        background-color: #f1f1f1;

        .title {
            position: fixed;
            width: 100vw;
            line-height: 45px;
            font-weight: 600;
            background-color: #f3d306;
            color: #fff;
        }

        .box {
            padding-top: 45px;

            .section {
                background-color: #fff;
                margin: 10px;
                padding: 10px 5px;
                border-radius: 10px;

                .top {
                    display: flex;
                    border-bottom: 1px solid #c4c4c4;
                    padding-bottom: 5px;

                    > input {
                        margin: 0 10px;
                    }

                    > img {
                        margin-left: 13px;
                        margin-right: 5px;
                        border-radius: 5px;
                    }

                    > span {
                        line-height: 30px;
                    }
                }

                .demo {
                    display: flex;
                    padding: 10px 0 0 25px;

                    > input {
                    }

                    > img {
                        width: 75px;
                        height: 75px;
                        border-radius: 10px;
                        margin: 0 8px;
                    }
                }
            }
        }
    }
</style>